<template>
	<view>
		<TopNav title="新建产品"></TopNav>
		<u-form class="padding-lr-sm padding-bottom" labelWidth="98px" :model="form" ref="form" :rules="rules">
			<view class="padding-tb">
				<text class="cuIcon-title text-gray"></text>
				<text class="">基本信息</text>
			</view>
			<view class="padding-tb-xs padding-lr radius bg-white">
				<u-form-item label="饲料名称" borderBottom required prop="name">
					<u-input v-model="form.name" border="none" placeholder="填写饲料名称" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="饲料类型" borderBottom required prop="secondTypeDict">
					<DictPicker dict="biz_feedstuff_product_type" v-model="form.secondTypeDict" placeholder="选择饲料类型">
					</DictPicker>
				</u-form-item>
				<u-form-item label="规格" borderBottom required prop="specifications">
					<u-input v-model.number="form.specifications" border="none" placeholder="填写饲料规格" inputAlign="right">
						<view slot="suffix" style="width:70px">
							<DictPicker dict="biz_feedstuff_product_specifications_unit"
								v-model="form.specificationsUnitDict" placeholder="单位"></DictPicker>
						</view>
					</u-input>
				</u-form-item>
				<u-form-item label="生产厂家" borderBottom required prop="manufacturer">
					<u-input v-model="form.manufacturer" border="none" placeholder="填写生产厂家" inputAlign="right"></u-input>
				</u-form-item>
				<u-form-item label="所属仓库" required borderBottom @click="handleOpenWarehouseSelect" prop="warehouseId">
					<u-input v-model="form.warehouseName" border="none" inputAlign="right" placeholder="选择所属仓库" readonly
						class="pointer-none">
						<u-icon slot="suffix" name="arrow-right"></u-icon>
					</u-input>
				</u-form-item>
				<u-form-item label="初始库存">
					<u-input v-model="form.stock" border="none" placeholder="填写初始库存" inputAlign="right"></u-input>
				</u-form-item>



			</view>
			<view class="padding-tb-xs padding-lr radius bg-white margin-top">
				<u-form-item label="备注" labelPosition="top">
					<u-textarea v-model="form.remarks" border="bottom" placeholder="填写备注信息" autoHeight></u-textarea>
				</u-form-item>

			</view>
			<view class="padding-tb">
				<text class="cuIcon-title text-gray"></text>
				<text class="">相关图片</text>
			</view>
			<view class="padding radius bg-white">
				<UploadImage v-model="form.fileUrls" :limit="9"></UploadImage>
			</view>
		</u-form>
		<view class="bottom-tools padding flex justify-around bg-white">
			<van-button class='basis-xl' type="info" @click="handleSubmit">
				提交
			</van-button>
		</view>

	</view>
</template>

<script>
	import UploadImage from "@/components/upload-image.vue"
	import dayjs from 'dayjs'
	import {
		detail,
		add,
		update
	} from "@/api/work/products-inventory"
	import DictPicker from '@/components/dict-picker/index.vue'

	export default {
		components: {
			UploadImage,
			DictPicker
		},
		data() {
			return {
				queryParams: {
					id: undefined
				},
				form: {
					productTypeDict: 'SL',
					warehouseName: undefined,
					warehouseId: undefined,
					name: undefined,
					manufacturer:undefined,
					secondTypeDict: undefined,
					specifications: undefined,
					specificationsUnitDict: undefined,
					stock: undefined,
					remarks: undefined,
					fileUrls: undefined
				},
				rules: {
					warehouseId: {
						type: 'string',
						required: true,
						message: '所属仓库不能为空',
						trigger: ['blur', 'change']
					},
					name: {
						type: 'string',
						required: true,
						message: '饲料名称不能为空',
						trigger: ['blur', 'change']
					},
					secondTypeDict: {
						type: 'string',
						required: true,
						message: '饲料类型不能为空',
						trigger: ['blur', 'change']
					},
					specifications: {
						type: 'number',
						required: true,
						message: '饲料规格不能为空',
						trigger: ['blur', 'change']
					},
					manufacturer:{
						type: 'string',
						required: true,
						message: '生产厂家不能为空',
						trigger: ['blur', 'change']
					}
				}

			}
		},
		computed: {
			timestampFormat() {
				return dayjs(this.form.time).valueOf()
			},
		},
		onReady() {
			//onReady 为uni-app支持的生命周期之一
			this.$refs.form.setRules(this.rules)
		},
		onLoad(query) {
			if (query.id) {
				this.queryParams.id = query.id
				this.getDetail()
			}
		},
		onShow() {

		},
		onUnload() {
			uni.$off('warehouseSelect', this.receiveWarehouseSelect)
		},
		methods: {
			
			handleSubmit(type) {
				this.$refs.form.validate().then(res => {
					add(this.form).then(res => {
						this.$tab.navigateBack()
					})
				})
			},
			getDetail() {
				detail(this.queryParams).then(res => {
					this.form = res.data
				})
			},
			receiveWarehouseSelect(val) {
				if (val.length === 0) {
					this.form.warehouseId = undefined
					this.form.warehouseName = undefined
					return
				}
				let {
					id,
					name
				} = val[0]
				this.form.warehouseId = id
				this.form.warehouseName = name
				this.getMonitoringFactors()
			},
			handleOpenWarehouseSelect() {
				uni.$on('warehouseSelect', this.receiveWarehouseSelect)
				this.$tab.navigateTo('/pages/work/warehouse/select?id=' + this.form.warehouseId)
			},
			reset() {
				this.form = {
					productTypeDict: undefined,
					warehouseId: undefined,
					name: undefined,
					manufacturer:undefined,
					secondTypeDict: undefined,
					specifications: undefined,
					specificationsUnitDict: undefined,
					stock: undefined,
					remarks: undefined,
					fileUrls: undefined
				}
				this.$nextTick(() => {
					this.$refs.form.resetFields()
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/common/var.scss";
	page {
		@include fixed-bottom;
	}
	
</style>